<template>
  <div>
    <el-card class="box-cardff">
      <div class="plan-list">
        <div class="tab-container">
          <el-tabs v-model="activeTab">
            <el-tab-pane label="全部计划" name="all"></el-tab-pane>
            <el-tab-pane label="我的计划" name="my"></el-tab-pane>
            <el-tab-pane label="我的审核" name="review"></el-tab-pane>
          </el-tabs>
        </div>

        <div class="operation-buttons">
          <div class="left-buttons">
            <el-button type="success" @click="handleAdd">新增</el-button>
            <el-button @click="handleDelete">删除</el-button>
            <el-button type="primary" @click="handleAdjust">调整计划</el-button>
            <el-button type="primary" @click="handleExport">导出</el-button>
          </div>

          <div class="search-box">
            <el-input v-model="searchQuery" placeholder="请输入计划编号或名称" class="search-input">
              <el-button slot="append" icon="el-icon-search"></el-button>
              <el-button slot="append" icon="el-icon-refresh"></el-button>
            </el-input>
          </div>
        </div>

        <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column prop="index" label="序号" width="60">
          </el-table-column>
          <el-table-column label="操作" width="80">
            <template slot-scope="scope">
              <el-button type="text" style="color: #67C23A" @click="handleView(scope.row)">查看</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="100">
            <template slot-scope="scope">
              <el-tag :type="getStatusType(scope.row.status)">{{ scope.row.status }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="planNo" label="计划编号" width="120">
          </el-table-column>
          <el-table-column prop="planName" label="计划名称" width="180">
          </el-table-column>
          <el-table-column prop="planType" label="计划类型" width="100">
          </el-table-column>
          <el-table-column prop="executeRule" label="执行周期规则" width="120">
          </el-table-column>
          <el-table-column prop="startTime" label="计划开始时间" width="160">
          </el-table-column>
          <el-table-column prop="endTime" label="计划结束时间" width="160">
          </el-table-column>
          <el-table-column prop="maintainer" label="保养班组" min-width="120">
          </el-table-column>
        </el-table>

        <div class="pagination-container">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="currentPage" :page-sizes="[10, 20, 30, 50]" :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
          </el-pagination>
        </div>
      </div>
    </el-card>
    <el-dialog title="计划调整" :visible.sync="visible" width="800px" :close-on-click-modal="false"
      class="plan-adjust-dialog">

      <el-form :model="formDataTi" :rules="rules" ref="adjustForm" label-width="120px" size="small">

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="计划编号">
              <el-input v-model="formDataTi.planNo" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计划名称">
              <el-input v-model="formDataTi.planName" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="计划开始时间">
              <el-input v-model="formDataTi.startTime" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计划结束时间">
              <el-input v-model="formDataTi.endTime" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="保养班组">
              <el-input v-model="formDataTi.team" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="保养负责人">
              <el-input v-model="formDataTi.leader" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="其他保养人">
          <el-input v-model="formDataTi.others" disabled></el-input>
        </el-form-item>

        <el-form-item label="调整类型" prop="adjustType">
          <el-select v-model="formDataTi.adjustType" placeholder="请选择调整类型" style="width: 100%">
            <el-option label="调整计划时间" value="time"></el-option>
            <el-option label="调整保养人员" value="person"></el-option>
            <el-option label="其他调整" value="other"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="调整结束日期" prop="adjustEndDate">
          <el-date-picker v-model="formDataTi.adjustEndDate" type="date" placeholder="请选择日期" style="width: 100%">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="调整原因" prop="adjustReason">
          <el-input type="textarea" v-model="formDataTi.adjustReason" :rows="4" placeholder="请输入调整原因">
          </el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleConfirm">确 认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'PlanList',
  data() {
    return {
      visible: false,
      formDataTi: {
        planNo: 'ME1010',
        planName: '液压系统润滑保养计划',
        startTime: '2022-07-22',
        endTime: '2022-07-22',
        team: '设备润滑班组',
        leader: '俊豪松',
        others: '李华、张敏、杨静、赵嘉',
        adjustType: '',
        adjustEndDate: '',
        adjustReason: ''
      },
      rules: {
        adjustType: [
          { required: true, message: '请选择调整类型', trigger: 'change' }
        ],
        adjustEndDate: [
          { required: true, message: '请选择调整结束日期', trigger: 'change' }
        ],
        adjustReason: [
          { required: true, message: '请输入调整原因', trigger: 'blur' }
        ]
      },
      activeTab: 'my',
      searchQuery: '',
      tableData: Array.from({ length: 10 }, (_, index) => ({
        index: index + 1,
        status: ['待审核', '驳回', '审核中', '已驳回', '待审核', '未开始', '待实施', '实施中', '已关闭', '已关闭'][index],
        planNo: 'ME1010',
        planName: '涂装设备喷漆不均匀',
        planType: ['日计划', '周计划', '月计划', '季计划', '年计划'][index % 5],
        executeRule: '按周执行规则',
        startTime: '2025-07-12 10:30',
        endTime: '2025-07-12 10:30',
        maintainer: '无故障组'
      })),
      selectedRows: [],
      currentPage: 1,
      pageSize: 10,
      total: 45
    }
  },
  methods: {
    //调整计划
    show() {
      this.visible = true
    },
    handleCancel() {
      this.visible = false
      this.$refs.adjustForm.resetFields()
    },
    handleConfirm() {
      this.$refs.adjustForm.validate((valid) => {
        if (valid) {
          this.$message.success('提交成功')
          this.visible = false
          this.$refs.adjustForm.resetFields()
        }
      })
    },
    getStatusType(status) {
      const statusMap = {
        '待审核': 'info',
        '驳回': 'danger',
        '审核中': 'warning',
        '已驳回': 'danger',
        '未开始': 'info',
        '待实施': 'warning',
        '实施中': 'success',
        '已关闭': ''
      }
      return statusMap[status] || ''
    },
    handleAdd() {
      this.$router.push({ path: "/equipment/maintenance/jihua/xin" });
    },
    handleDelete() {
      if (this.selectedRows.length === 0) {
        return this.$message.warning('请选择要删除的计划')
      }
      this.$confirm(`确认删除选中的 ${this.selectedRows.length} 个计划?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message.success('删除成功')
      }).catch(() => { })
    },
    handleAdjust() {
      // this.$message.success('打开调整计划弹窗')
      this.visible = true
    },
    handleExport() {
      this.$message.success('开始导出数据')
    },
    handleView(row) {
      // this.$message.info(`查看计划：${row.planNo}`)
      this.$router.push({ path: "/equipment/maintenance/jihua/cha" });
    },
    handleSelectionChange(val) {
      this.selectedRows = val
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.fetchData()
    },
    fetchData() {
      // 实现获取数据的逻辑
      console.log('获取第' + this.currentPage + '页，每页' + this.pageSize + '条')
    }
  }
}
</script>

<style scoped>
.box-cardff {
  margin-top: 25px;
  margin-left: 35px;
  width: 1200px;
}

.plan-list {
  padding: 20px;
}

.tab-container {
  margin-bottom: 20px;
}

.operation-buttons {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.left-buttons {
  display: flex;
  gap: 10px;
}

.search-box {
  width: 300px;
}

.search-input {
  width: 100%;
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
}

.el-table {
  margin-bottom: 20px;
}

.el-button--text {
  padding: 0;
}

.el-tag {
  margin: 0 2px;
}

.el-table .cell {
  padding-left: 10px;
  padding-right: 10px;
}
</style>
